<!-- 压力表 -->
<template>
  <div class="flex-center table-top">
    <px-form ref="formRef" :model="queryParams" :inline="true" class="custom-form-ui search-form">
      <px-form-item label="设备编号" prop="eqpNo">
        <px-input v-model.trim="queryParams.eqpNo" style="width: 260px" placeholder="请输入设备编号" clearable />
      </px-form-item>
      <px-form-item label="气体种类" prop="type">
        <px-select v-model="queryParams.type" style="width: 260px" placeholder="请选择气体种类" clearable>
          <px-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
        </px-select>
      </px-form-item>
      <px-form-item label="日期" prop="date">
        <px-date-picker v-model="queryParams.date" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD" style="width: 260px" />
      </px-form-item>
      <div class="search-form-btn">
        <px-button type="primary" @click="handleQuery">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
      </div>
    </px-form>
  </div>
  <div v-loading="tableLoading" class="table-content">
    <px-table height="calc(100vh - 330px)" :data="tableData" size="small" border class="common-table">
      <px-table-column type="index" label="序号" fixed width="55" align="center" />
      <px-table-column prop="gasName" label="气体种类" min-width="120" show-overflow-tooltip />
      <px-table-column prop="deviceCode" label="设备编号" min-width="120" show-overflow-tooltip />
      <px-table-column prop="itemName" label="项目" min-width="120" show-overflow-tooltip />
      <px-table-column prop="statValue" label="值" min-width="120" show-overflow-tooltip />
      <px-table-column prop="lslValue" label="SPEC L" min-width="120" show-overflow-tooltip />
      <px-table-column prop="uslValue" label="SPEC U" min-width="120" show-overflow-tooltip />
      <px-table-column label="操作" width="100" fixed="right" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="曲线查看" placement="top">
            <px-button link icon="BusinessMeasurement" type="primary" @click="handleViewLine(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
  </div>

  <px-dialog v-model="editDialogVisible" title="编辑" width="400">
    <px-form ref="editFormRef" :model="editFormParams">
      <px-form-item label="SPEC L" prop="lsl" label-width="80">
        <px-input v-model.trim="editFormParams.lsl" placeholder="请输入" clearable />
      </px-form-item>
      <px-form-item label="SPEC U" prop="usl" label-width="80">
        <px-input v-model.trim="editFormParams.usl" placeholder="请输入" clearable />
      </px-form-item>
    </px-form>
    <template #footer>
      <span class="dialog-footer">
        <px-button @click="cancelEdit">取消</px-button>
        <px-button type="primary" @click="saveEdit">确定</px-button>
      </span>
    </template>
  </px-dialog>

  <div v-if="viewCurveVisible">
    <ViewCurve v-model:visible="viewCurveVisible" fromPage="pressure" :data="rowData" />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { queryEquipSystem } from "@/api/equip/archive";
import { getPressureListAPI, editPressureListAPI } from "@/api/consumption/bulkGas";
import { PxMessage } from "px-ui";
import ViewCurve from "./viewCurve.vue";

const formRef = ref();
const editFormRef = ref();

const state = reactive({
  queryParams: {
    eqpNo: "",
    type: "",
    date: ""
  },
  editFormParams: {
    lsl: "",
    target: "",
    usl: ""
  },
  typeList: [],
  tableLoading: false,
  tableData: [],
  editDialogVisible: false,
  rowData: {},
  viewCurveVisible: false
});
const { queryParams, editFormParams, typeList, tableLoading, tableData, editDialogVisible, rowData, viewCurveVisible } = toRefs(state);

onMounted(() => {
  getGasTypeList();
  handleQuery();
});

// 获取气体种类下拉框
const getGasTypeList = async () => {
  const res = await queryEquipSystem({ className: "GAS" });
  const t = res.find(item => item.code === "SC2AC83D");
  if (!t?.children?.length) return;
  state.typeList = t.children.map(item => {
    let { name, code } = item;
    const reg = new RegExp("系统", "g");
    name = name.replace(reg, "");
    return { label: name, value: code };
  });
  state.typeList = state.typeList.filter(item => item.label !== "电气");
};

// 查询
const handleQuery = async () => {
  try {
    state.tableLoading = true;
    const { eqpNo, type, date } = state.queryParams;
    const params = {
      itemKey: eqpNo,
      gasSystemCode: type.toString(),
      searchDate: date
    };
    state.tableData = await getPressureListAPI(params);
  } catch (err) {
    console.log(err);
  } finally {
    state.tableLoading = false;
  }
};

// 重置
const resetQuery = () => {
  formRef.value.resetFields();
  handleQuery();
};

// 编辑
const handleEdit = row => {
  state.editDialogVisible = true;
  state.rowData = row;
  state.editFormParams = {
    lsl: row.lslValue,
    target: row.targetValue,
    usl: row.uslValue
  };
};

// 取消编辑
const cancelEdit = () => {
  editFormRef.value.resetFields();
  state.editDialogVisible = false;
};

// 保存编辑
const saveEdit = async () => {
  const { lsl, usl } = state.editFormParams;
  const params = {
    itemKey: state.rowData.itemKey,
    uslValue: usl,
    lslValue: lsl
  };
  await editPressureListAPI(params);
  cancelEdit();
  handleQuery();
  PxMessage.success("修改成功");
};

// 曲线查看
const handleViewLine = row => {
  state.rowData = row;
  state.viewCurveVisible = true;
};
</script>

<style lang="scss" scoped>
@import url("@/views/gas/consumption/scss/common.scss");
</style>
